<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>事件绑定</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      float: left;
      margin-right: 20px;
      background: rgb(51, 199, 204);
    }
    .clear{
      clear: both;
    }

    .active{
      background: rgb(212, 94, 47);
    }
  </style>
</head>

<body style="height: 2000px;">
  <div id="root"></div>
  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>

  <script type="text/babel">
    //声明一个函数类型的变量
    let fn = function(){
      alert(1314);
    };
    //对象方法
    let obj = {
      fn: function(){
        alert(369);
      }
    };
    //箭头函数
    let arrow = () => {
      alert(957);
    }
    //函数调用返回一个函数
    let test = () => {
      //返回一个函数  
      return () => {
        alert('我是一个返回的函数')
      }
    }
    //创建虚拟 DOM 对象
    let vdom = <div>
      <h2>绑定方式</h2>
      <div className="box" onClick={function(){
        alert('521')
      }}>直接设置函数</div>
      <div className="box" onClick={fn}>函数类型的变量</div>
      <div className="box" onClick={obj.fn}>对象方法</div>
      <div className="box" onClick={arrow}>箭头函数</div>
      <div className="box" onClick={test()}>函数调用</div>
      <div className="box" onMouseOver={(e) => {
        //为事件源添加 class 类名
        e.target.classList.add('active');
      }}  onMouseOut={(e) => {
        //移除类名
        e.target.classList.remove('active');
      }} ></div>
      <div className="clear"></div>
      <h2>事件源</h2>
      <div className="box" onClick={function(e){
        //修改元素
        // this.style.background = 'red';//这种方式不可以
        //事件对象
        // console.log(e.target);
        e.target.style.background = 'rgb(150, 40, 40)';
      }}>事件源</div>
      <div className="clear"></div>

      <h2>阻止默认行为</h2>
      <a href="http://www.baidu.com" onClick={(e) => {
        //阻止默认行为   //常见的默认行为  表单提交, 选中文本, 右键菜单, ctrl + c 复制内容, 键盘按下输入到文本框中.
        // return false; //不可用
        e.preventDefault();
      }}>百度</a>

      <h2>事件对象</h2>
      <div className="box" onClick={(e) => {
        console.log(e);
      }}></div>

      <div className="clear"></div>
      <h2>change 事件</h2>
      <input type="text" onChange={() => {
        console.log('change');
      }} />

    </div>;

    //渲染
    ReactDOM.render(vdom, document.querySelector('#root'));
  </script>
</body>

</html>